<template>
  <div>
        <nut-cell 
          :show-icon="true" 
          title="请选择接种地点" 
          :desc="cityCustmer" 
          @click.native="openSwitch('isVisible2')">
        </nut-cell>
        <nut-picker
          :is-visible="isVisible2"
          :default-value-data="defaultValueData"
          :list-data="custmerCityData"
          @close="closeSwitch('isVisible2')"
          @confirm="setChooseValueCustmer"
          @choose="updateChooseValueCustmer"
        ></nut-picker>
  </div>
</template>



<script>
const APIData = [
  {
    label: 1,
    array: [
      {
        label: 1,
        value: '济南市历下区绿景社区门诊接种'
      },
      {
        label: 2,
        value: '济南医院临时接种点'
      },
      {
        label: 3,
        value: '济南市中心医院预防门诊'
      },
      {
        label: 4,
        value: '燕山社区服务中心'
      },
    ]
  },
  {
    label: 2,
    array: [
      {
        label: 1,
        value: '济南市民族医院'
      },
      {
        label: 2,
        value: '济南妇儿医院'
      },
      {
        label: 3,
        value: '领秀城区卫生服务中心'
      }, 
    ]
  },
   {
    label: 3,
    array: [
      {
        label: 1,
        value: '营市街预防接种门诊'
      },
      {
        label: 2,
        value: '腊山街道卫生服务中心'
      },
      {
        label: 3,
        value: '腊山国际花都预防接种门诊'
      },
    ]
  },
   {
    label: 4,
    array: [
      {
        label: 1,
        value: '北园杨庄卫生服务中心'
      },
      {
        label: 2,
        value: '北村社区卫生服务中心'
      },
      {
        label: 3,
        value: '新城社区卫生服务中心'
      },
      {
        label: 4,
        value: '堤口社区卫生服务中心'
      },
    ]
  },
   {
    label: 5,
    array: [
      {
        label: 1,
        value: '山大校医院预防接种中心'
      },
      {
        label: 2,
        value: '历城疾控中心门诊'
      },
    ]
  },
];
export default {
  data() {
    return {
       //下拉菜单
      option: '请选择',
      isVisible: false,
      defaultValueData: null,
      cityCustmer: '请选择',
      // arrdq:[],
      isVisible2: false,
      custmerCityData: [
        [
          {
            label: 1,
            value: '历下区'
          },
          {
            label: 2,
            value: '市中区'
          },
          {
            label: 3,
            value: '槐荫区'
          },
          {
            label: 4,
            value: '天桥区'
          },
          {
            label: 5,
            value: '历城区'
          }
        ]
      ],
    }
  },
  methods: {
  //下拉菜单
    openSwitch(param) {
      this[`${param}`] = true;
    },

    closeSwitch(param) {
      this[`${param}`] = false;
    },
    setChooseValueCustmer(chooseData) {
      let dq = this.$store.state.arrdq;
      var str = chooseData.map(item => item.value).join('-');
      this.cityCustmer = str;
      dq.push(str)
       // console.log(dq)
    },
    updateChooseValueCustmer(self, index, resValue) {
      // 本demo为二级联动，所以限制只有首列变动的时候触发事件
      if (index === 0) {
        //此处模拟查询API，如果数据缓存了不需要再重新请求
        let { label } = resValue;
        setTimeout(() => {
          var resItems = APIData.find(item => item.label == label);
          if (resItems && resItems.array.length) {
            this.$set(this.custmerCityData, 1, resItems.array);
            // 更新第二列位置
            self.updateChooseValue(self, index + 1, this.custmerCityData[1][0]);
          }
        }, 100);
      }
    },
  },
}
</script>



<style scoped>


</style>
